<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('finance.waitingList') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="orderId">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable><!--内部订单号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="5">-->
                        <!--<el-form-item prop="withdrawAccount">-->
                            <!--<el-input v-model="form.withdrawAccount" :placeholder="$t('common.receiptAccount')" clearable>&lt;!&ndash;收款账号&ndash;&gt;</el-input>-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                    <el-col :span="4">
                        <el-form-item prop="userId">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> <!--放款方式-->
                        <el-form-item prop="withdrawChannel" label="">
                            <el-select v-model="form.withdrawChannel" multiple clearable :placeholder="$t('common.loanType')" style="width: 100%;">
                                <el-option v-for="item in keyMap.loanChannel" :key="item.value" :label="item.label" :value="item.value" v-if="item.active===1"></el-option>
                                <!--<el-option key="" :label="$t('common.loanType')" value=""></el-option>-->
<!--                                <el-option key="1" label="M Lhuillier" value="1"></el-option>-->
<!--                                <el-option key="3" label="Palawan Pawnshop" value="3"></el-option>-->
                                <!-- <el-option key="4" label="ECPay" value="4"></el-option> -->
<!--                                <el-option key="5" label="Bank" value="5"></el-option>-->
<!--                                <el-option key="6" label="GCash" value="6"></el-option>-->
<!--                                <el-option key="7" label="Coins" value="7"></el-option>-->
<!--                                <el-option key="9" label="RD Pawnshop" value="9"></el-option>-->
                                <!-- <el-option key="10" label="Sevven_Corporation" value="10"></el-option> -->
                                <!-- <el-option key="100" label="BALANCE" value="100"></el-option> -->
                                <!-- <el-option key="99" label="Others" value="99"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="applyTime"><!--申请时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="userType" > <!--用户类型-->
                            <el-select v-model="form.userType" :clearable='true' :placeholder="$t('common.userType')" style="width: 100%">
                                <el-option key="0" :label="$t('common.newUser')" value="0"></el-option>
                                <el-option key="1" :label="$t('common.secNewUser')" value="1"></el-option>
                                <el-option key="2" :label="$t('common.oldUser')" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!---->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                        
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                            <el-button @click="checkBalanceHandler" type="primary">{{ $t('common.balanceInquiry') }}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <three-status-switch
                                v-model="automaticLending.isOpen"
                                :start-value="0"
                                :middle-value="2"
                                :end-value="1"
                                @change="changeAutoLend"
                                :disabled="autoLoanDisabled"></three-status-switch>
                            <span> {{ $t('common.loanType') }}: {{ automaticLending.isOpen | SwitchLeadingActionType }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" @selection-change="handleTableSelect" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('common.allChoose')" type="selection"></el-table-column>
                        <el-table-column label="UserId" prop="userId" min-width="120"></el-table-column>
                        <el-table-column prop="userType" :label="$t('common.userType')" width="150"><!--用户类型-->
                            <template slot-scope="scope">
                                <span>{{ scope.row.userType | switchUserType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.name')" prop="userName" min-width="150"><!--姓名--></el-table-column>
                        <el-table-column :label="$t('common.receiptAccount')" prop="withdrawAccount" min-width="180"><!--收款账号--></el-table-column>
                        <el-table-column :label="$t('common.receiptAccountBank')" prop="withdrawAccountBank" min-width="150"></el-table-column><!--收款账号所属银行-->
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" min-width="150"><!--手机号码--></el-table-column>
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" min-width="200"><!--内部订单号--></el-table-column>
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="loanPeriod" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanAmount')" prop="loanAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template><!--放款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.applyDate')" prop="applyTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请日期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanType')" prop="withdrawChannel" min-width="180"><!--放款方式-->
                            <template slot-scope="{ row }">{{ row.withdrawChannel | SwitchLoanChannel }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.notProcessTime')" prop="processingHour" min-width="120">
                            <template slot-scope="{ row }">{{ row.processingHour }}<span v-if="row.processingHour">h</span></template><!--未处理时长-->
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" min-width="120">
                            <template slot-scope="{ row }">
                                <el-button type="text" @click="showPass(row)">{{ $t('common.pass') }}</el-button>
                                <el-button type="text" @click="showRefuse(row)">{{ $t('common.refuse') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-show="tableData.length" class="table_bottom_btns">
                        <el-button @click="batchPass" type="primary" :disabled="selectedIdList.ids.length === 0" size="small">{{ $t('common.batchPass') }}</el-button>
                        <el-button @click="showBatchRefuse" type="primary" :disabled="selectedIdList.ids.length === 0" size="small">{{ $t('common.batchRefuse') }}</el-button>
                        <el-button @click="batchOfflineLoan" :disabled="automaticLending.isOpen===1||selectedIdList.ids.length === 0" type="primary" size="small">{{ $t('common.offlineLoan') }}</el-button><!--线下放款-->
                    </div>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
        <!--拒绝放款弹框start-->
        <el-dialog :title="$t('common.refuseReason')" :visible.sync="showRefuseDialog" width="460px">
            <el-form :form="refuseForm">
                <el-form-item :label="refuseForm.label">
                    <el-input type="textarea" v-model="refuseForm.reason" :placeholder="$t('common.refuseReason')" :rows="8" :maxlength="200"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="batchRefuse" v-if="showBatchRefuseButton">{{ $t('common.batchSubmit') }}</el-button>
                <el-button type="primary" @click="refuse" v-else>{{ $t('common.submit') }}</el-button>
                <el-button type="cancel" @click="showRefuseDialog = false">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>
        <!--拒绝放款弹框end-->

        <!--余额查询弹窗start-->
        <alert-dialog :title="$t('common.checkBalance')" :visible.sync="checkBalanceDialog.isVisible" width="450px" :dialogPosition="'center'" class="checkBalanceDialog">
            <div class="main">
                <div v-for="item in checkBalanceDialog.data" :key="item.name">{{item.name}}：{{ item.value | formatCurrency }}</div>
            </div>
            <div class="footer" slot="footer">
                <el-button @click="checkBalanceDialog.isVisible = false" type="primary">{{ $t('common.confirm') }}</el-button>
            </div>
        </alert-dialog>
        <!--余额查询弹窗end-->

    </div>
</template>

<script src="./main.js"></script>
<style lang="scss" scoped>
    [data-page=finance-finance-loan-waitingList] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .checkBalanceDialog {
            .main {
                text-align: center;
                font-size: 16px;
                padding:20px 0;
            }
            .footer {
                text-align: center;
            }
        }
    }
</style>
